<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详细页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/detailed.css">
</head>
<body>
<div class="home">
    <!-- 详细页头部 -->
    <div class="header">
        <div class="header_top">
            <p>全国服务热线：400-000-0000</p>
            <div>
                <a href="#">加入收藏</a>
                <a href="#">设为首页</a>
            </div>
        </div>
        <div class="header_bottom">
            <div class="header_left">
                <img src="img/logo.png" alt="">
                <p>TK科技有限公司</p>
                <p>cer dcd keo Holdings Co., Ltd.</p>
            </div>
            <div class="header_right">
                <ul>
                    <li><div><a href="index.html">首页<br>Home</a></div></li>
                    <li><div><a href="detailed.html">关于我们<br>About</a></div></li>
                    <li><div><a href="product.html">产品中心<br>Products</a></div></li>
                    <li><div><a href="#">服务支持<br>Service</a></div></li>
                    <li><div><a href="#">新闻中心<br>News</a></div></li>
                    <li><div><a href="#">在线商店<br>Shop</a></div></li>
                    <li><div><a href="#">联系我们<br>Contact Us</a></div></li>
                </ul>
            </div><div></div>
        </div>
    </div>
    <!-- 详细页中部内容 -->
    <div class="content">
        <div class="banner"></div>
        <div class="content_all">
            <div class="content_top">
                <p>首页 > 新品发布</p>
                <ul class="clearfix" id="nn">
                    <li class="checked">百万高清系列</li>
                    <li class="">标清系列</li>
                    <li class="">户外防水系列</li>
                    <li class="">室内系列</li>
                </ul>
                <div>
                    <form action="#">
                        <input type="search" value="搜索产品">
                        <button><img src="img/icon_soushou.png" alt=""></button>
                    </form>
                </div>
            </div>
            <div class="content_mid">
                <ul>
                    <li>
                        <img src="img/d1.png" alt="">
                        <h3>S6202Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d2.png" alt="">
                        <h3>S6223Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d3.png" alt="">
                        <h3>S6208Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d4.png" alt="">
                        <h3>S6211Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d5.png" alt="">
                        <h3>S6262Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d6.png" alt="">
                        <h3>S6256Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d7.png" alt="">
                        <h3>S6202Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d8.png" alt="">
                        <h3>S6202Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                    <li>
                        <img src="img/d9.png" alt="">
                        <h3>S6202Y-WR</h3>
                        <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                    </li>
                </ul>
            </div>
            <div class="content_bottom">
                <ul>
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 详细页底部内容 -->
    <div class="footer" style="margin-top: 0">
        <div class="footer_top">
            <div class="footer_link">
                <div>
                    <span>关注我们 ：</span>
                    <a href="#"><img src="img/qq.png" alt=""></a>
                    <a href="#"><img src="img/weixin.png" alt=""></a>
                </div>
                <p>
                    <a href="#">网站首页</a>·<a href="#">新闻动态</a>·<a href="#">关于我们</a>·<a href="#">团队风采</a>·<a href="#">联系我们</a>·<a href="#">在线留言</a>
                </p>
            </div>
        </div>
        <div class="footer_bottom">
            <p> ©2015 TK科技有限公司  版权所有沪ICP证13022560号-7 All Rights Reserved</p>
        </div>
    </div>
</div>
    <script>
        window.onload = function (){
            var ul_nav = $('nn').children;
            for(var i=0; i < ul_nav.length; i++){
                (function (i) {
                    var nav = ul_nav[i];
                    nav.onmouseover = function () {
                        for(var j=0; j < ul_nav.length; j++){
                            ul_nav[j].className = '';
                        }
                        nav.className = "checked";
                    };
                })(i);
            }
        };
        // 获取ID
        function $(id) {
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
    </script>
</body>
</html>